<!--
 * @Description: 账单详情
 * @Author: sunhyodar
 * @Date: 2022-08-30 14:03:50
 * @LastEditTime: 2022-08-31 12:17:33
 * @LastEditors: Please set LastEditors
-->
<template>
  <div class="body">
    <div class="header">
      <span class="header-title ">账单字段</span>
      <div
        v-for="tag in tableData.prop"
        :key="tag.id"
        :class="['tags', tag.select ? 'tag-select' : 'tag-deselect']"
        @click="tagsClick(tag)"
      >
        {{ dealTagsLabel(tag.name) }}
      </div>
    </div>
    <div class="list">
      <span class="list-title">{{ groupName }}</span>
      <span class="list-date">{{ convertDateValue(dateValue) }}</span>
      <el-table
        :data="tableData.data"
        style="width: 100%"
        height="250"
        :header-cell-style="getRowClass"
      >
        <el-table-column
          v-for="item in tableData.prop"
          :key="item.prop"
          v-if="item.select"
          fixed
          :prop="item.id"
          :label="item.name"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tableData: {
        prop: [
          {
            id: "name",
            name: "产品名称",
            select: true,
          },
          {
            id: "proNo",
            name: "产品编号",
            select: false,
          },
          {
            id: "zxNo",
            name: "专线编号",
            select: true,
          },
          {
            id: "accDate",
            name: "账期",
            select: true,
          },
          {
            id: "balance",
            name: "账户余额（元）",
            select: true,
          },
          {
            id: "monthCost",
            name: "当月月费（元）",
            select: true,
          },
          {
            id: "freeCost",
            name: "优惠费用（元）",
            select: true,
          },
          {
            id: "groupCost",
            name: "套餐费用（元）",
            select: true,
          },
          {
            id: "endDate",
            name: "到期时间",
            select: true,
          },
          {
            id: "addr",
            name: "安装地址",
            select: true,
          },
          {
            id: "unit",
            name: "付款单位",
            select: true,
          },
          {
            id: "acct",
            name: "付款账户",
            select: true,
          },
          {
            id: "oweAmount",
            name: "欠费金额（元）",
            select: true,
          },
          {
            id: "isTS",
            name: "是否托收",
            select: false,
          },
        ],
        data: [
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
          {
            name: "电路出租套餐",
            proNo: "e5555555555",
            zxNo: "1000.00",
            accDate: "2018-07",
            balance: "5230.00",
            monthCost: "5230.00",
            freeCost: "5230.00",
            groupCost: "5230.00",
            endDate: "2030-07-14",
            addr: "杭州市西湖区学院路黄龙万科",
            unit: "浙江超时代房地产有限公司",
            acct: "622099120010",
            oweAmount: "1000.0",
            isTS: "是",
          },
        ],
      },
      dateValue: "",
      groupName: "", //集团名称
    };
  },
  created() {
    console.log("created:", location.href);
    this.groupName = this.getUrlParamsByKey("groupName");
    this.dateValue = this.getUrlParamsByKey("dateValue");
  },
  methods: {
    convertDateValue(dateStr) {
      if (dateStr.length > 5) {
        return "账期: " + dateStr.slice(0, 4) + "-" + dateStr.slice(4);
      }
    },
    getTagClass(tag) {
      return "tag-selec tags";
    },
    tagsClick(tag) {
      console.log(tag);
      tag.select = !tag.select;
    },
    dealTagsLabel(name) {
      return name.replace("（元）", "");
    },
    getUrlParamsByKey(name) {
      var reg = new RegExp("[^?&]?" + encodeURI(name) + "=[^&]+");
      var arr = location.href.match(reg);
      if (arr != null) {
        const val = decodeURI(arr[0].substring(arr[0].search("=") + 1));
        console.log("val:", val);
        return val;
      }
      return "";
    },

    //设置表格第一行的颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#EAF3FF; color:#0085d0";
      } else if (columnIndex == 0) {
        return "background:#EAF3FF; color:#0085d0";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  padding: 20px auto 0;
}
.header {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: row;
}
.header-title {
  margin-right: 24px;
}
.tags {
  padding: 5px 10px;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 12px;
}
.tag-select {
  background-color: #0085d0;
  color: #eaf3ff;
}
.tag-deselect {
  background-color: #eeeeee;
  color: #999999;
}
.list {
  margin-top: 20px;
  border: 1px solid #e6e6e6;
  border-bottom-width: 0;
  border-bottom-color: #0085d0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &-title {
    margin-top: 20px;
    font-size: 18px;
    color: #17233b;
    font-weight: 500;
  }
}

.list-date {
  font-size: 14px;
  color: #333333;
  padding-bottom: 20px;
}
</style>
